﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sortable</title>
    <!-- Script -->
    <script src="script/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="script/ui.core.js" type="text/javascript"></script>
    <script src="script/ui.sortable.js" type="text/javascript"></script>
    
    <style type="text/css">
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#sortable li 
	{ 
	    margin: 0 3px 3px 3px; 
	    padding: 0.4em; 
	    padding-left: 1.5em; 
	    font-size: 1em; 
	    height: 18px; 
	    border:dashed 1px #000;
	    background-color:#ccc;
	}
	
	.placeholder-item
	{ 
	    margin: 0 3px 3px 3px; 
	    padding: 0.4em; 
	    padding-left: 1.5em; 
	    font-size: 1em; 
	    height: 18px; 
	    border:solid 1px #000;
	}
	
	#sortable li span { position: absolute; margin-left: -1.3em; }
	</style>

	<script type="text/javascript">
	    $(function() {
	        $("#sortable").sortable({ placeholder: 'placeholder-item' });
	    });
	</script>
</head>
<body>
    <ul id="sortable">
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1
        </li>
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2
        </li>
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3
        </li>
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4
        </li>
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5
        </li>
    </ul>
</body>
</html>
